.mask {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	transition: all 0.3s ease;
	background: rgba(102, 102, 102, 0.3);
	opacity: 1;
	z-index: 2;
	visibility: visible;
}

.contents {
	width: 588rpx;
	height: 490rpx;
	border-radius: 15rpx;
	position: fixed;
	left: 50%;
	top: 35%;
	margin-left: -294rpx;
	margin-top: -285rpx;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transition: all 0.3s ease;
}

.contenthide {
	margin-left: -350rpx;
	margin-top: -340rpx;
	width: 700rpx;
	height: 680rpx;
	opacity: 0;
	z-index: 0;
	visibility: hidden;
}

.visible {
	opacity: 0;
	z-index: 2;
	visibility: hidden;
}

.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	width: 560rpx;
	font-size: 32rpx;
}

.center {
	color: #333;
	font-size: 32rpx;
}

.close {
	width: 50rpx;
	height: 50rpx;
}

image {
	width: 100%;
	height: 100%;
}

.pay-money {
	width: 525rpx;
	height: 240rpx;
	border-bottom: 1rpx solid #EBEBEB;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.pay-money view {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pay-way {
	width: 520rpx;
	height: 85rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #8A8A8A;
	font-size: 28rpx;
}

.money {
	font-size: 45rpx;
	font-weight: 600;
	margin-bottom: 50rpx;
}

.money text {
	font-size: 60rpx;
	margin-left: 10rpx;
}

.pay-img {
	color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pay-img image {
	width: 35rpx;
	height: 35rpx;
	margin-right: 10rpx;
}

.code {
	width: 100%;
	height: 120rpx;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.code-box {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: 1px solid #d0d0d0;
}

.code-box-item {
	width: 86rpx;
	height: 86rpx;
	background: #fff;
	font-size: 40rpx;
	line-height: 75rpx;
	text-align: center;
}

.code-box-item:not(:last-child) {
	border-right: 1px solid #d0d0d0;
}

.keyboard {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #EBEBEB;
	display: flex;
	justify-content: center;
	z-index: 2;
	flex-wrap: wrap;
	transition: all 0.2s ease-in 0.2s;
}

.active {
	bottom: -400rpx;
}

.keyboard-item {
	box-sizing: border-box;
	width: 250rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	font-size: 40rpx;
	color: #333;
	height: 99rpx;
	border: 1rpx solid #EBEBEB;
	border-top: none;
	border-left: none;
}

.hide {
	opacity: 0;
}

.delte {
	background: none;
	box-shadow: none;
}

.delte image {
	width: 60rpx;
	height: 60rpx;
}

.isIphone {
	padding-bottom: 68rpx !important;
}
